<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>

    <script src="../elements/element.js"></script>
    <link rel="stylesheet" href="../elements/element.css">
    <script src="../static/global.js"></script>
    <script src="../static/jquery-1.8.0.js"></script>
    <script src="../static/axios.min.js"></script>

</head>
<body>
<div id="app">

    <el-form>
    <el-form-item label="商品介绍" prop="decript">
        <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                :show-file-list="false"
                :on-success="uploadSuccess"
                with-credentials="true">
            <i class="el-icon-plus"></i>
        </el-upload>
    </el-form-item>


    <div class="demo-image__preview">

            <el-row>
                <el-col   v-for="(imagesattrs,index) in imagesattr" :span="2">
                    <i slot="default" style="float: right;" @click="removeImg(imagesattrs.img_url)"  class="el-icon-error"></i>
                    <el-image
                            style="width: 100px; height: 100px"

                            :src="imagesattrs.img_url"
                            :preview-src-list="imagesattrs.srcList">
                    </el-image>

                    <el-row>
                        <el-col :span="24" v-if="imagesattrs.default_img==1">
                            <input
                                    type="radio"
                                    checked
                                    name="add"
                            />设为默认
                        </el-col>
                        <el-col :span="24" v-else>
                            <input
                                    type="radio"
                                    name="add"
                                    @change="checkdeFauImg(index)"
                            />设为默认
                        </el-col>
                    </el-row>
                </el-col>


            </el-row>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>



    </div>
    </el-form>
</div>
</body>

<script>
    var Main = {
        data() {
            return {
                uploadUrl:glodate.serverZuul+"brand/filesUpload",
                add:'',
                dialogImageUrl:[],
                dialogVisible:false,

                imagesattr:[

                ],
            }
        },
        created(){
            this.getSkuImg()
        },
        methods: {
            uploadSuccess(response,file,fileList) {

                console.log(response);
                let img={
                    'img_url':response,
                    'srcList':[{response}],
                    'default_img':'',
                    'sku_id':''
                }
                this.imagesattr.push(img)
            },
            removeImg(url){

                axios({
                    method: 'delete',
                    url: glodate.serverZuul+"brand/deletefiles",
                    params: {'objectName':url}, // 请求参数放在请求体
                    dataType:'json',
                })


                const i= this.imagesattr.findIndex(x=>x===url)
                this.imagesattr.splice(i,1);
                //移除属性
                console.log(JSON.stringify(this.imagesattr))
            },
            getSkuImg(){
                axios.get(glodate.serverZuul+"product/findAllSkuImg/1")
                .then(x=>{
                    let xdata=x.data;

                    xdata.forEach(item=>{
                        let url=item.img_url;
                        let imageattr={
                            'sku_id':item.sku_id,
                            'img_url':url,
                            'default_img':item.default_img,
                            'srcList':[{url}],
                        }
                        this.imagesattr.push(imageattr);


                    })

                })
            },
            checkdeFauImg(index){

                this.imagesattr.forEach(x=>{
                     x.default_img=0;
                })

                this.imagesattr[index].default_img=1;
              //默认图片

            },
            onSubmit(){
                console.log(JSON.stringify(this.imagesattr))
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

</html>